<template>
  <div class="reslist">
    <div class="result" v-if="!onsuggest">
      <Newsong
        v-for="item in searchList"
        :key="item.id"
        :item="item"
        @play-song="$emit('play-song', $event)"
        :selectedSong="selectedSong"
        :playingStatus="playingStatus"
      ></Newsong>
    </div>
    <div class="sugg" v-else>
      <h1 @click="$emit('tosearch', val)">搜索“{{ val }}”</h1>
      <ul>
        <li
          v-for="(item, index) in suggest"
          :key="index"
          @click="$emit('tosearch', item.keyword)"
        >
          <p></p>
          <h3>{{ item.keyword }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Newsong from "@/components/Newsong.vue";
export default {
  props: [
    "searchList",
    "selectedSong",
    "playingStatus",
    "suggest",
    "val",
    "onsuggest",
  ],
  computed: {
    sug() {
      if (this.suggest) {
        return true;
      } else {
        return false;
      }
    },
  },
  components: {
    Newsong,
  },
};
</script>

<style lang="less" scoped>
.sugg {
  padding-left: 5px;
  h1 {
    line-height: 50px;
    color: cornflowerblue;
    border-bottom: 1px solid #eee;
  }
  ul {
    li {
      line-height: 40px;
      display: flex;
      align-items: center;
      p {
        width: 15px;
        height: 15px;
        background-image: url("");
        margin: 0 10px;
      }
      h3 {
        flex: 1;
        border-bottom: 1px solid #eee;
        padding-left: 5px;
      }
    }
  }
}
</style>